<template>
  <div class="container">
<!--    <span></span>-->
    <div class="echarts" ref="echartTwo"></div>
  </div>
</template>

<script>
export default {
  name: "pieChart",
  props: {
    quantity: {
      type: Array,
      default() {
        return []
      }
    }
  },
  data() {
    return {
      title: '收入情况'
    }
  },
  methods: {
    echartsInit() {
      let echarts = require('echarts');
      let myCharts = echarts.init(this.$refs.echartTwo)
      // let img = '';

      let trafficWay = this.quantity.length ? this.quantity : [0, 0, 0]
      let totalCandy = 0
      let total = 0;
      for (let i = 0; i < trafficWay.length; i++) {
        // trafficWay[i].value)
        total += trafficWay[i].value * 1;
      }
      totalCandy = parseInt(total / 10000)
      let data = [];
      let color=['#00ffff','#409B5C','#006ced','#ffe000','#ffa800','#ff5b00','#ff3000']
      for (let i = 0; i < trafficWay.length; i++) {
        data.push({
          value: trafficWay[i].value,
          name: trafficWay[i].name,
          itemStyle: {
            normal: {
              borderWidth: 5,
              shadowBlur: 20,
              borderColor:color[i],
              shadowColor: color[i]
            }
          }
        }, {
          value: 2,
          name: '',
          itemStyle: {
            normal: {
              label: {
                show: false
              },
              labelLine: {
                show: false
              },
              color: 'rgba(0, 0, 0, 0)',
              borderColor: 'rgba(0, 0, 0, 0)',
              borderWidth: 0
            }
          }
        });
      }
      let seriesOption = [{
        name: '',
        type: 'pie',
        clockWise: false,
        radius: [105, 109],
        hoverAnimation: false,
        itemStyle: {
          normal: {
            label: {
              show: true,
              position: 'outside',
              color: '#333',
              formatter: function(params) {
                let percent = 0;
                percent = ((params.value / total) * 100).toFixed(0);
                if(params.name !== '') {
                  if (isNaN(percent)) {
                    return params.name + '\n' + '\n' + 0 + '%';
                  }
                  return params.name + '\n' + '\n' + percent + '%';
                } else {
                  return '';
                }
              },
            },
            labelLine: {
              length:30,
              length2:100,
              show: true,
              color:'#333'
            }
          }
        },
        data: data
      }];
      let option = {
        // backgroundColor: '#0A2E5D',
        color : color,
        title: {
          text: `今日总糖果数\n\n${ total > 9999 ? totalCandy + '万' : total } `,
          top: '40%',
          textAlign: "center",
          left: "49%",
          textStyle: {
            color: '#333',
            fontSize: 22,
            fontWeight: '400'
          }
        },
        graphic: {
          elements: [{
            type: "image",
            z: 3,
            style: {
              // image: img,
              width: 178,
              height: 178
            },
            left: 'center',
            top:  'center',
            position: [100, 100]
          }]
        },
        tooltip: {
          show: false
        },
        legend: {
          icon: "circle",
          orient: 'horizontal',
          // x: 'left',
          data: ['盟主赛', '新秀赛', '大侠赛'],
          top: -5,
          right: 10,
          // bottom: 120,
          align: 'right',
          textStyle: {
            color: "#333"
          },
          itemGap: 20
        },
        toolbox: {
          show: false
        },
        series: seriesOption
      }

      myCharts.setOption(option)
    }
  },
  watch: {
    quantity(newVal, oldVal) {
      if (newVal.length !== 0) {
        this.echartsInit()
      }
    }
  }
}
</script>

<style scoped lang="scss">

.container {
  width: 100%;
  height: 100%;
  .echarts {
    width: 100%;
    height: 100%;
  }
}

</style>
